<template>
  <div>
    <div class="modal">
      <div class="modal-bg"></div>
      <div class="sale">
        <div class="rele-titles">
          <img @click="closeExcel" src="../assets/img/tub.png" alt="">
          <span>表格上传</span>
        </div>
        <div class="excal_content">
          <div>
            <el-upload
              class="upload-demo"
              ref="upload"
              action="http://men.wuyoufang.com/api/newapi/Uploadfile/upload"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-success="handleSuccess"
              :file-list="fileList"
              :limit="1"
              :auto-upload="false">
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
              <el-button type="primary" @click="templateDown" size="small">模板下载</el-button>
              <div slot="tip" class="el-upload__tip">只能上传xlsx文件，且不超过5M,  请您下载Excal模板,非模板无法上传</div>
            </el-upload>
            <div v-show="previewShow" class="open_show">
              <p>上传失败，请重新上传！</p>
            </div>
            <div v-show="openButtonShow" class="open_show">
              <p>上传服务器成功，请点击保存，保存至数据库</p>
              <el-button size="small" type="success" @click="openExcel">保存</el-button>
            </div>

          </div>
          <div>
            <!--预览-->
            <!--<a :href="resUrl"></a>-->
          </div>
        </div>

      </div>
    </div>
  </div>
</template>
<script>

  export default {
    props: {
      closeSaleExcel: {
        type: Function
      },
      buildId: {
        type: Number
      },
      LDmodal:{
        type:Function
      }
    },
    name: 'SaleExcal',
    data() {
      return {
        fileList: [],
        resUrl: '',
        realUrl: '',
        openButtonShow:false,
        previewShow:false,
      }
    },
    methods: {

      //下载模板
      templateDown(){
        //下载模板
        window.location.href = "http://men.wuyoufang.com/api/static/excel_template/building.xlsx";
      },

      // 关闭弹窗
      closeExcel(){
        this.closeSaleExcel();
        this.openButtonShow = false;
        this.fileList = [];
        this.previewShow = false;
        this.resUrl = '';
        this.realUrl = '';
      },
      // 点击上传服务器
      handleSuccess(response, file, fileList) {
        console.log(response.message);
        if (response.status === 200) {
          this.resUrl = response.res;
          this.realUrl = response.real_url;//保存用
          this.previewShow = false;
          this.openButtonShow = true;
        }else{
          this.previewShow = true;
          this.fileList = [];
        }
      },
      // 点击保存到数据库
      openExcel() {
        let that = this;
        console.log('666');
        console.log(that.realUrl);
        console.log(that.buildId);
        that.$http.post('/newapi/Batchadd/premises', {
          file_url: that.realUrl,
          premises_id: that.buildId
        }).then(res => {
          console.log(that.realUrl);
          console.log(res);
          that.closeExcel();
          that.$store.state.messageString = res.data.message;
          that.LDmodal();
        }).catch(err => {
          console.log(err)
        })
      },
      submitUpload() {
        this.$refs.upload.submit();
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      }
    }

  }
</script>
<style scoped>
  .sale {
    width: 70%;
    height: 450px;
    background: #fff;
    position: absolute;
    padding-bottom: 20px;
    left: 15%;
    z-index: 10;
    top: 15%;
    border-radius: 5px;
    overflow: hidden;
    overflow-y: auto;
    box-shadow: #e8e7e7 0px 0px 10px;
  }

  .rele-titles {
    width: 58.2%;
    padding: 0 0.5%;
    font-size: 2em;
    line-height: 50px;
    color: #000;
    background: #f5f5f7;
    position: fixed;
    z-index: 9;
    border-bottom: 1px solid #d3d3d3;
    padding-right: 200px;;
  }

  img:hover {
    background: #bd2c00 !important;
    color: #ffffff;
  }

  img {
    /*position: fixed;*/
    flex-star: 40px;
    /*margin-left: 44%;*/
    position: relative;
    cursor:pointer;
    border-radius: 10px;
  }

  img {
    left: 113%;
    top: 3px;
  }

  .excal_content {
    padding: 100px 10px 0 20px;
    display: flex;
  }

  .excal_content .input {

  }

  .excal_content .input > div {
    /*margin-left: 20px;*/
  }
  .excal_content .open_show{
    padding: 10px 0;
  }
  .excal_content .open_show p{
    color: red;
    padding: 10px 0;
  }
</style>
